<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>酒店</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.city }}酒店预订</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 酒店搜索 -->
    <div class="search_wrapper">
      <HotelSearchForm @updateQueryString="updateQueryString" />
    </div>

    <!-- 酒店选项 -->
    <div class="hotel_option">
      <div class="hotel_option_left" v-if="cityInfo">
        <div class="hotel_option_left_row">
          <div class="hotel_option_label">区域：</div>
          <div :class="['hotel_option_content', { active: isTotalArea }]">
            <div class="hotel_area">
              <span v-for="(v, i) of cityInfo.scenics" :key="v.id || i">{{
                v.name
              }}</span>
            </div>
            <a href="javascript:;" @click="isTotalArea = !isTotalArea">
              <i class="el-icon-d-arrow-right"></i>
              等{{ cityInfo.scenics.length }}个区域
            </a>
          </div>
        </div>
        <div class="hotel_option_left_row">
          <div class="hotel_option_label">
            均价
            <el-tooltip
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="top-start"
            >
              <i class="question_mark">?</i> </el-tooltip
            >：
          </div>
          <div class="hotel_option_content hotel_option_average">
            <el-tooltip
              effect="dark"
              content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
              placement="bottom-start"
            >
              <div class="hotel_option_average_item">
                <i
                  v-for="(v, i) of 3"
                  :key="v.id || i"
                  class="iconfont iconhuangguan"
                ></i>
                ￥332
              </div>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
              placement="bottom-start"
            >
              <div class="hotel_option_average_item">
                <i
                  v-for="(v, i) of 4"
                  :key="v.id || i"
                  class="iconfont iconhuangguan"
                ></i>
                ￥521
              </div>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
              placement="bottom-start"
            >
              <div class="hotel_option_average_item">
                <i
                  v-for="(v, i) of 5"
                  :key="v.id || i"
                  class="iconfont iconhuangguan"
                ></i>
                ￥768
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div
        class="hotel_option_right"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
      >
        <!-- 地图组件 -->
        <HotelMap
          :list="hotelList"
          :city="$route.query.cityName"
          @located="handleLocate"
        />
      </div>
    </div>

    <!-- 酒店过滤 -->
    <div class="fliter_wrapper">
      <HotelFilterBar @updateQueryString="updateQueryString" />
    </div>

    <!-- 酒店列表 -->
    <div class="hotel_list_wrapper" v-if="hotelList.length" v-loading="loading">
      <HotelItem v-for="(v, i) of hotelList" :key="v.id || i" :hotel="v" />

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @current-change="changePage"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <div class="no_hotel" v-else>没有符合条件的酒店</div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  components: {},
  props: {},
  data() {
    return {
      //酒店列表
      hotelList: [],
      //城市信息
      cityInfo: null,
      isTotalArea: false, //全部地区信息
      //分页组件数据
      currentPage: 1, //当前页
      pageSize: 10, //页容量
      total: 0, //全部页数

      //loading数据绑定
      loading: false
    };
  },
  computed: {
    //酒店列表请求参数集，利用计算属性进行依赖
    requestParams() {
      //分页相关参数
      const { pageSize: _limit, currentPage } = this;

      const _start = _limit * (currentPage - 1); //开始项为当前页-1 * 页容量

      return {
        _limit,
        _start,
        ...this.$route.query
      };
    }
  },
  methods: {
    //更新查询字符串
    updateQueryString(obj) {
      this.currentPage = 1; //重置为第一页
      //更新查询字符串
      this.$router
        .replace({
          path: "/hotel",
          query: {
            ...this.$route.query,
            ...obj
          }
        })
        .catch(console.log);
    },
    //切换分页
    changePage(val) {
      this.currentPage = val;
      document.documentElement.scrollTop = 0;
    },
    //获取酒店列表
    async getHotelList() {
      const { cityName, ...params } = this.requestParams; //计算属性请求参数
      if (cityName) {
        this.loading = true; //打开加载中

        const cityRes = await this.$axios.get("/cities", {
          params: { name: cityName }
        });
        // console.log(res);
        this.cityInfo = cityRes.data.data[0];
        params.city = this.cityInfo.id;

        const res = await this.$axios.get("/hotels", {
          params,
          paramsSerializer: params => {
            return qs.stringify(params, { arrayFormat: "repeat" });
          }
        });
        // console.log(res);
        this.hotelList = res.data.data;
        this.total = res.data.total;

        this.loading = false;
      }
    },

    //执行定位
    handleLocate(city) {
      //更新城市名
      this.$router.replace({
        path: "/hotel",
        query: {
          ...this.$route.query,
          cityName: city
        }
      });
    }
  },
  watch: {
    requestParams() {
      //监听参数集，参数集变化重新获取酒店列表
      this.getHotelList();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;

  .breadcrumb {
    padding: 20px 0;
  }

  .hotel_option {
    display: flex;
    justify-content: space-between;
    .hotel_option_left {
      width: 580px;
      font-size: 14px;

      .hotel_option_left_row {
        display: flex;
        margin-bottom: 20px;

        .hotel_option_label {
          width: 65px;
          margin-right: 10px;

          .question_mark {
            display: inline-block;
            width: 1.2em;
            height: 1.2em;
            line-height: 1.2em;
            background: #ccc;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            vertical-align: top;
            font-size: 12px;
          }
        }

        .hotel_option_content {
          flex: 1;
          &.active {
            .hotel_area {
              height: auto;
            }

            .el-icon-d-arrow-right {
              transform: rotate(-90deg);
            }
          }
        }

        .hotel_area {
          margin-bottom: 5px;
          height: 38px;
          line-height: 15px;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;

          span {
            margin-right: 1em;
            padding: 2px 0;
          }
        }

        .el-icon-d-arrow-right {
          transform: rotate(90deg);
          margin: 0 5px;
          color: orange;
        }

        .hotel_option_average {
          display: flex;
        }
        .hotel_option_average_item {
          display: flex;
          margin-right: 30px;
          font-size: 14px;
          color: #999;

          i {
            color: orange;
          }
        }
      }
    }

    .hotel_option_right {
      width: 420px;
      height: 260px;
    }
  }

  .hotel_list_wrapper {
    .pagination {
      text-align: right;
      margin: 20px 0;
    }
  }

  .no_hotel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    margin-bottom: 100px;
  }
}
</style>
